<template>
  <div class="components-container">
    <my-video
      v-if="videoFlag"
      :url-options="videos"
      @delete-video="deleteVideo"
    />
    <el-row :gutter="20">
      <el-col :span="16">
        <div class="info">
          <div class="btn_wrapper">
            <div class="name">{{ site.siteName }}</div>
            <el-button type="primary" size="mini" @click="dialogVisible = true">添加视频</el-button>
          </div>
          <div>地址：{{ address }}</div>
          <div>详细地址：{{ site.location }}</div>
          <div>简介：{{ site.remarks }}</div>
        </div>
        <my-map
          :coordinate="coordinate"
          @update_coordinate="updateMap"
          @add_coordinate="addMap"
        />
      </el-col>
      <el-col :span="8">
        <image-upload
          :images="siteImages"
          :params="params"
          :title="title"
          :span="24"
          @delete-image="deleteImage"
          @upload-image-success="uploadImageSuccess"
        /></el-col>
    </el-row>

    <el-dialog
      title="添加视频"
      :visible.sync="dialogVisible"
      width="50%"
    >
      <el-form
        ref="dataForm"
        :rules="rules"
        :model="video"
        label-position="left"
        label-width="100px"
      >
        <el-form-item label="视频链接" prop="videoUrl">
          <el-input v-model="video.videoUrl" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addVideo">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  getSingleBase,
  getBaseImages,
  deleteBaseImage,
  addBaseImage,
  getBaseVideo,
  queryBaseLocations,
  modifiySiteLocations,
  addSiteLocations,
  addSiteVideo,
  delSiteVideo
} from '@/api/base'
import ImageUpload from '@/components/ImageUpload'
import MyVideo from '@/components/MyVideo'
import MyMap from '@/components/MyMap'
import store from '@/store'

export default {
  name: 'BaseImage',
  components: {
    ImageUpload,
    MyVideo,
    MyMap
  },
  data() {
    const IMAGE_FILE_NAME = 'siteImage'
    return {
      siteId: '',
      site: {},
      title: '基地图片',
      siteImages: [],
      videos: [],
      coordinate: [],
      imgUrl: process.env.VUE_APP_BASE_IMAGE_API + IMAGE_FILE_NAME,
      params: {
        account: store.getters.token,
        path: IMAGE_FILE_NAME
      },
      videoFlag: true,
      rules: {
        videoUrl: [
          {
            type: 'string',
            required: true,
            message: '请填写视频链接',
            trigger: 'trigger'
          }
        ]
      },
      video: {
        siteId: '',
        videoUrl: ''
      },
      dialogVisible: false
    }
  },
  computed: {
    address() {
      return `${this.site.province}-${this.site.city}-${this.site.county}`
    }
  },
  created() {
    this.siteId = this.$route.query.siteId
    this.video.siteId = this.siteId
    this.fetchData()
  },
  methods: {
    fetchData() {
      getSingleBase({ siteId: this.siteId })
        .then(response => {
          this.site = response.site
        })
        .catch(error => {
          console.log(error)
        })
      this.getBaseImages()
      this.getVideos()
      queryBaseLocations({ siteId: this.siteId })
        .then(response => {
          const coordinate = response.lngLats
          if (coordinate !== 'error') {
            const arr = coordinate.split('@')
            const lngLat = arr.map(item => {
              const [lng, lat] = item.split(',')
              return [lng, lat]
            })
            this.coordinate = [lngLat]
          } else {
            this.coordinate = []
          }
        })
        .catch(error => {
          console.log(error)
        })
    },
    async getBaseImages() {
      const res = await getBaseImages({ siteId: this.siteId })
      const siteImages = res.siteImages // 图片
      this.siteImages = siteImages.map(item => {
        return {
          id: item.id,
          name: item.image,
          url: this.imgUrl + '/' + item.image,
          visible: false
        }
      })
    },
    getVideos() {
      getBaseVideo({ siteId: this.siteId })
        .then(response => {
          const siteVideos = response.siteVideo
          this.videos = siteVideos.map(item => {
            return {
              id: item.id,
              value: item.videoUrl
            }
          })
          if (this.videos.length === 0) {
            this.videoFlag = false
          }
          console.log(111, this.videos)
        })
        .catch(error => {
          console.log(error)
        })
    },
    updateMap(lngLats) {
      modifiySiteLocations({
        lngLats,
        siteId: this.siteId
      })
        .then(response => {
          this.$message({
            type: 'success',
            message: '修改成功!'
          })
        })
        .catch(error => {
          console.log(error)
        })
    },
    addMap(lngLats) {
      addSiteLocations({
        lngLats,
        siteId: this.siteId
      })
        .then(response => {
          this.$message({
            type: 'success',
            message: '添加成功!'
          })
        })
        .catch(error => {
          console.log(error)
        })
    },
    deleteImage(id) {
      deleteBaseImage({ id })
        .then(response => {
          const index = this.siteImages.findIndex(
            v => v.id === id
          )
          this.siteImages.splice(index, 1)
          this.$notify({
            title: '提示',
            message: '删除成功！',
            type: 'success',
            duration: 2000
          })
        })
        .catch(error => {
          console.log(error)
        })
    },
    uploadImageSuccess(image) {
      addBaseImage({
        siteId: this.siteId,
        image
      })
        .then(response => {
          // this.siteImages.push({
          //   name: image,
          //   url: this.imgUrl + '/' + image,
          //   visible: false
          // })
          this.getBaseImages()
          this.$notify({
            title: '提示',
            message: '上传成功！',
            type: 'success',
            duration: 2000
          })
        })
        .catch(error => {
          console.log(error)
        })
    },
    addVideo() {
      this.$refs['dataForm'].validate(valid => {
        if (valid) {
          addSiteVideo(this.video)
            .then(res => {
              this.getVideos()
              this.dialogVisible = false
            })
            .catch(error => {
              console.log(error)
            })
        }
      })
    },
    async deleteVideo(videoId) {
      const res = await delSiteVideo({ videoId })
      if (res) {
        this.getVideos()
        this.$message({
          type: 'success',
          message: '删除成功！'
        })
      }
    }
  }
}
</script>

<style scoped lang="scss">

.info {
  margin:30px 0;
  font-size: 18px;
  > div {
    margin-bottom: 20px;
  }
  .btn_wrapper {
    display:flex;
    align-items: center;
    > .name {
      font-size: 25px;
      font-weight: bolder;
      margin-right: 20px;
    }
  }
}

</style>

